<template>
       <nav class="bg-white shadow-md h-16 px-10 flex rounded-lg justify-between items-center lg:max-xl:px-5">
         <ul class="2xl:w-[50%] flex h-full xl:max-2xl:w-[64%] lg:max-xl:w-[74%] sm:max-lg:w-full lg:max-xl:text-sm">
          <header class="w-[12rem] flex justify-center items-center">
            <router-link to="/" class="flex justify-center items-center">
              <img src="@/assets/logo.png" class="w-12 h-12 mr-2"/>
              <span class="text-slate-400 tracking-widest font-bold">日记系统</span>
            </router-link>
          </header>
          <li v-for="item in menuList" :key="item.id" class="w-full h-full flex-1">
            <router-link :to="item.path" tabindex="0" :class="{'flex justify-center h-full items-center text-slate-500 border-[#0a85d9] group': true,'border-b-2': item.path == currentPath}">
              <i :class="['iconfont',item.icon,'group-hover:text-[#0a85d9]']" :style="{fontSize: item.size + 'px'}"></i>
              <span class="group-hover:text-[#0a85d9] ml-1">{{ item.name }}</span>
            </router-link>
          </li>
        </ul>
        <div class="w-[20rem] flex justify-center sm:max-lg:hidden lg:max-xl:text-sm">
          <ol class="w-full h-full flex">
            <dl class="flex-1 flex justify-center items-center">
              <img src="@/assets/avator.webp" class="w-8 h-8 rounded-full" alt="头像"/>
              <span class="text-sm ml-1 text-slate-500">管理员</span>
            </dl>
            <dl class="flex-1 flex justify-center items-center">
              <i class="iconfont icon-zhinan" style="font-size: 24px;"></i>
              <span class="text-sm ml-1 text-slate-500" @click="director">系统指南</span>
            </dl>
            <dl class="flex-1 flex justify-center items-center">
              <i class="iconfont icon-tuichu" style="font-size: 24px;"></i>
              <span class="text-sm ml-1 text-slate-500">退出登录</span>
            </dl>
          </ol>
        </div>
      </nav>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router'
  import { watch,ref } from 'vue'
  import {useCommonStore} from '@/stores/common'
  const commonStore = useCommonStore()
  let router = useRouter()
  let currentPath = ref<string>('')
  watch(() => router.currentRoute.value.fullPath,() => {
    currentPath.value = router.currentRoute.value.fullPath
    console.log(currentPath.value)
  },{ immediate: true })

 interface MenuList {
    id: number,
    name: string,
    path: string,
    icon: string,
    size: number
  }
    let menuList: MenuList[] = [
      {
        id: 1,
        name: '首页',
        path: '/',
        icon: 'icon-shouye_1_',
        size: 24
      },
      {
        id: 2,
        name: '用户管理',
        path: '/users',
        icon: 'icon-yonghuguanli',
        size: 24
      },
      {
        id: 3,
        name: '日记管理',
        path: '/posts',
        icon: 'icon-wenzhangguanli',
        size: 20
      },
      {
        id: 4,
        name: '标签管理',
        path: '/tags',
        icon: 'icon-biaoqianguanli',
        size: 20
      },
      // {
      //   id: 5,
      //   name: '系统设置',
      //   path: '/setting',
      //   icon: 'icon-shezhi',
      //   size: 24
      // }
    ]

    // 系统指南

    const director = () => {
      commonStore.isDriver = true
    }

    
</script>